<template>
    <view style="background-color: #f7f8fa;">
       
        <view class="lz-status_bar">
            <view class="lz-top_view"></view>
        </view>
		
       
       
        <view class="kaoshi-head">
            <view class="kaoshi-head-top">
                <view class="kaoshi-head-left" @tap="$navigateBack">
                    <view class="iconfont icon-zuojiantou"></view>
                </view>
				<view  class="kaoshi-head-m">
					{{cityName}}
					<text v-if="type==1">真题</text>
					<text v-else-if="type==2">模考</text>
					<text v-else-if="type==3" >测评</text>
				</view>
                
            </view>
        </view>
		
		<view style="background-color: #ffffff;height: 50px;position: fixed;top: 90px;width: 100%;z-index: 99;">
			<uni-search-bar
				
				style="background-color: #f4f4f4;" 
				class="uni-mt-10" radius="100" 
				placeholder="请输入搜索内容" 
				clearButton="auto" 
				cancelButton="none" 
				@blur="search()"
				v-model="inputVal"
				
				/>
		</view>
		<u-empty v-if="list==''"
				mode="list"
				icon="https://shuati26.kptedu.com/uploads/image/kaifazhong.png"
				text="正在努力开发中,敬请期待哦"
				textColor="#666"
				width="300rpx"
				height="300rpx"
		>
		</u-empty>
		<!-- 主题内容 -->
		<view style="margin-top: 140px;" v-if="searchResult==''" >
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
						   :down="downOption" :up="upOption">
				<view class="exam-list"  v-for="(item, index) in list"  :key="index"  @tap="choice_exam(item)" >
					<view class="vip-image">
						<image v-if="item.vipswitch==0&&item.price==0" src="../../../static/img/mianfei.png"></image>
						<image v-else-if="item.vipswitch!=0&&item.price==0" src="../../../static/img/vip.png"></image>
						<image v-else="item.vipswitch==0&&item.price!=0" src="../../../static/img/money.png"></image>
					</view>
					<image v-if="item.score == 0" class="exam-list-img"  :src="'https://shuati26.kptedu.com'+item.image"></image>
					<image v-if="item.score != 0" class="exam-list-img"  src="../../../static/img/kaoshigray.jpg"></image>
					<view class="exam-list-item" >
						<text>&nbsp;&nbsp;&nbsp;{{item.exam_name}}</text>
						<view class="exam-list-con">
							<view  style="display: flex;align-items: center;font-size: 21rpx;">
								<text style="margin-right: 20px">共计{{item.num}}道题 </text>
								<u-icon v-if="item.score != 0" color="orange" name="file-text-fill"></u-icon>
								<u-icon v-if="item.score==0" color="#9c9c9c" name="file-text-fill"></u-icon>
								<!-- <image style="width: 12px;height: 15px;margin-left: 20px;margin-right: 5px;" src="../../../static/img/ks1.png"></image>  -->
								<text v-if="item.score != 0" style="color:orange;" @click="gojl(item)" >记录</text>
								<text v-if="item.score==0" style="color: #9c9c9c;">记录</text>
							</view>
							<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 15rpx;">
								<text style="width: 210px;">发布时间:&nbsp;&nbsp;{{item.start_date}}</text>
								<button @tap="choice_exam(item)" v-if="item.score==0" class="exam-list-btn1">考试</button>
								<button v-if="item.score != 0" class="exam-list-btn2">已考完</button> 
								<button v-if="item.vipswitch==0&&item.price!=0" class="exam-list-btn2">未解锁</button>
								<!-- <button v-else @tap="choice_exam(item)"  class="exam-list-btn1">考试</button> -->
							</view>
						</view>
						
					</view>
				</view>
			</mescroll-body>
		</view>
		
		<!-- 搜索内容 -->
		<view style="margin-top: 120px;" v-if="searchResult!=''">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
						   :down="downOption" :up="upOption">
				<view class="exam-list"  v-for="(item, index) in searchResult"  :key="index"  >
					<view class="vip-image">
						<image v-if="item.vipswitch==0&&item.price==0" src="../../../static/img/mianfei.png"></image>
						<image v-else-if="item.vipswitch!=0&&item.price==0" src="../../../static/img/vip.png"></image>
						<image v-else="item.vipswitch==0&&item.price!=0" src="../../../static/img/money.png"></image>
					</view>
					<image v-if="item.score == 0" class="exam-list-img"  :src="'https://shuati26.kptedu.com'+item.image"></image>
					<image v-if="item.score != 0" class="exam-list-img"  src="../../../static/img/kaoshigray.jpg"></image>
					<view class="exam-list-item" >
						<text>&nbsp;&nbsp;&nbsp;{{item.exam_name}}</text>
						<view class="exam-list-con">
							<view  style="display: flex;align-items: center;font-size: 21rpx;">
								<text style="margin-right: 20px">共计{{item.num}}道题 </text>
								<u-icon v-if="item.score != 0" color="orange" name="file-text-fill"></u-icon>
								<u-icon v-if="item.score == 0" color="#9c9c9c" name="file-text-fill"></u-icon>
								
								<!-- <image style="width: 12px;height: 15px;margin-left: 20px;margin-right: 5px;" src="../../../static/img/ks1.png"></image>  -->
								<text v-if="item.score != 0" color="orange" @click="gojl(item)"  >记录</text>
								<text v-if="item.score==0" color="#9c9c9c">记录</text>
							</view>
							<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 15rpx;">
								<text style="width: 210px;">发布时间:&nbsp;&nbsp;{{item.start_date}}</text>
								<button @tap="choice_exam(item)" v-if="item.score==0" class="exam-list-btn1">考试</button>
								<button v-if="item.score!=0" class="exam-list-btn2">已考完</button>
								<button v-if="item.vipswitch==0&&item.price!=0" class="exam-list-btn2">未解锁</button>
							</view>
						</view>
						
					</view>
				</view>
			</mescroll-body>
		</view>
		
		<!-- 弹框 -->
        <view class="tan"
           style="display: none;"  >
            <view class="tan-mask"
                  ></view>
            <view class="tan-modal">
                <view class="tan-title">
                    <view>{{current_exam.exam_name}}</view>
                </view>
                <view class="tan-content">
                    <view class="exam-tan-content">
                        <view class="exam-tan-content-flex">
                            <span>题数</span>
                            <view>{{current_exam.num}}题数</view>
                        </view>
                        <view class="exam-tan-content-flex">
                            <span>总分</span>
                            <view>{{current_exam.score}}分</view>
                        </view>
                        <view class="exam-tan-content-flex">
                            <span>参考时间</span>
                            <view>{{current_exam.givetime}}分钟</view>
                        </view>
                        <view class="exam-tan-content-flex">
                            <span>模式</span>
                            <view>{{current_exam.type_text}}</view>
                        </view>
                    </view>
                    <view class="exam-tan-button"
                          @tap="examBegin(current_exam)">开始答题
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
    import {mapState} from 'vuex'

    export default {
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
                // 下拉刷新的配置(可选, 绝大部分情况无需配置)
                downOption: {
                    use: true, // 是否启用下拉刷新; 默认true
                    auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
                    native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
                },
                // 上拉加载的配置(可选, 绝大部分情况无需配置)
                // upOption: {
                //     page: {
                //         num:0,
                //         size: 10 // 每页数据的数量,默认10
                //     },
                //     noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    
                // },
                // 列表数据
                list:[],

                type:0,//1 考试  2 模拟考试 3测试
                current_exam: {},
                
				subject_id:"",
				cityName:'',
				end_time:'',
				inputVal:'',
				searchResult:[],//搜索的数据数组
				from_type:'',
				
				
            }
        },
        onLoad(opts) {
			this.type=opts.type
			
            this.from_type=opts.from_type
			this.subject_id = opts.subject_id
			this.cityName=uni.getStorageSync('choose_cityName')
        },
        mounted() {
        },
        computed: {
            ...mapState(['subject']),
        },
        components: {
        },
        onShow() { 
        },
        methods: {
            /*上拉加载的回调*/
            async upCallback(page) {
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条

                let res = await this.$myHttp.post({
                    url:this.$myHttp.urlMap.allExaminationList,
                    data: {
						type:this.type,
                        subject_id: this.subject_id,
						province:uni.getStorageSync('choose_cityName'),
                        page: pageNum,
                        limit: pageSize
                    },
                    needLogin: true
                })
                if(res.code == 1){
                    // 接口返回的当前页数据列表 (数组)
                    let curPageData = res.data.data;
                    // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                    let curPageLen = curPageData.length;
                    // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                    // let totalPage = data.xxx;
                    // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                    let totalSize = res.data.total;

                    this.mescroll.endBySize(curPageLen, totalSize);
                    if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
                    this.list = this.list.concat(curPageData); //追加新数据
					//this.upgrade_time_text=upgrade_time_text.slice(0,11)
					
                }else{
                    this.mescroll.endErr()
                }
                // 此处仍可以继续写其他接口请求...
                // 调用其他方法...
            },
             
            // 考试开始，向后台发送开始考试的考试id，返回当前考试结束时间
    //         async examBegin(item){
				
    //             let res = await this.$myHttp.post({
    //                 url: this.$myHttp.urlMap.exam_begin,
    //                 data:{
    //                     exam_id:item.id
    //                 },
    //                 needLogin: true
    //             });
    //             if(res.code == 1){
    //                 let end_time = res.data.endtime
				// 	this.end_time=end_time
				// 	console.log(JSON.stringify(res.data)+"111")
					
    //             }
    //         },
			
            choice_exam(item,end_time) {
				if(item.is_allow == 1&&item.is_can==1){
					this.current_exam = item
					this.$nextTick(() => {
						//this.examBegin(item)
					})
				} 
				if(item.vipswitch==0&&item.price==0){
					this.$openrul('/pages/examination/examrule/examrule?id=' + item.id + '&type=' + item.type + '&exam_name=' + item.exam_name + '&title=' + item.type_text )
				}else if(item.vipswitch!=0&&item.price==0){
					var that=this
					uni.showModal({
						title: '会员专享',
						content:'糟糕您还没有题库卡，激活题库卡后可继续刷题', 
						cancelText:'稍后激活',
						confirmText:'立即激活',
						confirmColor:'#3c7bfc',
						cancelColor:'#acacac',
						success: function (res) {
							if (res.confirm) {
								 that.$openrul('/pagesa/my/vip/index')
								// console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					}); 
				}else if(item.vipswitch==0&&item.price==!0){
					var that=this
					uni.showModal({
						title: '付费课程',
						content:'糟糕需要激活，快去激活吧', 
						cancelText:'稍后激活',
						confirmText:'立即激活',
						confirmColor:'#3c7bfc',
						cancelColor:'#acacac',
						success: function (res) {
							if (res.confirm) {
								//that.$openrul('/pagesa/my/money/money')
								 that.$openrul('/pagesa/my/money/money?id='+item.id+'&image='+'http://shuati26.kptedu.com/'+item.image+'&exam_name='+item.exam_name+'&price='+item.price+'&type_text='+item.type_text)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					}); 
				}else if(item.is_allow == 0){
				    uni.showToast({
				        icon: 'none',
				        title: '您已参加过本场考试，不能重复考试'
				    })
				    return;
					}
                
            },
			// 搜索省份
			search() {
				let result = []
				this.list.forEach((item, index) => {
					console.log(item.exam_name+"item.exam_name")
						if (item.exam_name.indexOf(this.inputVal)!==-1) {
							result.push(item)
						}
				})
				this.searchResult = result
				
			},
			// gojl(item){
			// 	this.$openrul('/pages/examination/examOver/index?id='+item.id + '&from_type=' + item.type + '&exam_name=' + item.exam_name + '&title=' + item.type_text )
			// },
			gojl(item){
				this.$openrul('/pages/examination/examOver/indexf/indexf?id='+item.id + '&from_type=' + item.type + '&exam_name=' + item.exam_name + '&title=' + item.type_text )
			},
            
        }
    }
</script>

<style>
    page {
        background: #f6f7f9;
    }

    /*考试列表*/
    .kaoshi-tiku {
        background: #f6f7f9;
    }

    .kaoshi-tiku-content {
        width: 90%;
        margin: 0 auto;
		margin-top:10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        padding: 16px 10px;
		background:#fff;
		border-radius:10px;
        /* border-bottom: solid 1px #f5f5f5; */
    }

    .kaoshi-tiku-content-flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .kaoshi-tiku-content .icon-arrow {
        padding-left: 13px;
        color: #b3b3b3;
    }

    .kaoshi-tiku-content .icon-suo {
        padding-left: 13px;
        font-size: 24px;
        color: #d0cfcf;
    }

    .kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
        padding-bottom: 6px;
    }

    .index-tiku-content .kaoshi-tiku-content-flex:last-child {
        font-size: 13px;
        color: #b4b3b3;
    }

    .kaoshi-tiku-content-top {
        display: flex;
		justify-content: space-between;
        align-items: center;
    }

    .kaoshi-tiku-content-top img {
        width: 20px;
        height: 22px;
        margin-right: 10px;
    }

    .kaoshi-tiku-content-bottom {
        display: flex;
        align-items: center;
        font-size: 13px;
    }

    .kaoshi-tiku-content-flex .icon-renwu-tuandui {
        margin: 0 3px 0 0;
        color: #d0d0d0;
        font-size: 18px;
		border-radius: 20rpx;
    }

    .icon-shijian1 {
        color: #3c7bfc;
        font-size: 18px;
        padding-right: 2px;
    }

    /*弹窗*/
    .tan-mask {
        position: fixed;
        z-index: 999;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
    }

    .tan-modal {
        position: fixed;
        z-index: 999;
        width: 80%;
        max-width: 300px;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #fff;
        text-align: center;
        border-radius: 3px;
        overflow: hidden;
    }

    .tan-title {
        padding:15px 0;
        border-bottom: solid 1px #f4f4f4;
    }

    .tan-title view {
        font-weight: 400;
        font-size: 17px;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .tan-content {
        width: 90%;
        margin: 0 auto;
        font-size: 14px;
    }

    .exam-tan-content-flex {
        display: flex;
        width: 91%;
        margin: 0 auto;
        padding: 13px 0;
        border-bottom: solid 1px #f4f4f4;
    }
    
    .exam-tan-content-flex span {
        color: #767676;
        width: 42%;
        text-align: left;
    }
    
    .exam-tan-button {
        background: #3c7bfc;
        color: #fff;
        padding: 10px;
        margin: 15px 0;
        border-radius: 4px;
        font-size: 16px;
        display: block !important;
    }
    .exam-list{
    	display: flex;
    	    flex-flow: row nowrap;
    	    margin: auto;
    	    width: 92%;
    	    margin-top: 40rpx;
    	    justify-content: space-between;
    }
    .exam-list-img{
    	width: 20%;
    	    height: 180rpx;
    	    margin-right: 30rpx;
		
    	
    }
    .exam-list-item{
    	padding-top: 20rpx;
    	    letter-spacing: 1px;
    	    width: 75%;
    }
    .exam-list-item>text:nth-child(1){
    	font-weight: 900;
    	    font-size: 28rpx;
			letter-spacing: 1px;
    }
    .exam-list-con{
    	margin-top: 20rpx;
    	    color: gray;
    	    font-size: 21rpx;
    }
    .exam-list-btn1{
    	background-color: #24cefc;
    	    border-radius: 25px;
    	    color: white;
    	    width: 58px;
    	    height: 27px;
    	    font-size: 11px;
    	    letter-spacing: 2px;
    	    padding: 0;
    }
	.exam-list-btn2{
		background-color: #24cefc6e;
		    border-radius: 25px;
		    color: white;
		    width: 58px;
		    height: 27px;
		    font-size: 11px;
		    padding: 0;
		    letter-spacing: 2px;
	}
	.vip-image{
		width: 4rpx;
	}
	.vip-image>image{
		    width: 40rpx;
    height: 20rpx;
    position: relative;
    top: -13rpx;
    left: 80rpx;
	}
</style>